<template>
  <div>
    <el-submenu v-if="menuItem.children" :index="menuItem.path || menuItem.title">
      <template slot="title">
        <i v-if="menuItem.icon" :class="menuItem.icon"></i>
        <span>{{ menuItem.title }}</span>
      </template>
      <MenuItem
        v-for="item in menuItem.children"
        :key="item.path"
        :menu-item="item"
      />
    </el-submenu>
    <el-menu-item v-else :index="menuItem.path">
      <i v-if="menuItem.icon" :class="menuItem.icon"></i>
      <span slot="title">{{ menuItem.title }}</span>
    </el-menu-item>
  </div>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    menuItem: {
      type: Object,
      required: true
    }
  },
  computed: {
    isActive() {
      if (this.menuItem.children) {
        return this.menuItem.children.some(child => this.$route.path.startsWith(child.path))
      }
      return this.$route.path === this.menuItem.path
    }
  }
};
</script>

<style>
.v-list-group {
  --prepend-width: 8px !important;
}
</style>
